<template>
    <el-dialog class="dialog" width="338px" :model-value="show" title="添加类型" @close="NosubmitForm">
        <el-form ref="formRef" :model="form" :rules="rules">
            <el-form-item label="类型名称" prop="name" :label-width="formLabelWidth">
                <el-input v-model="form.name" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="NosubmitForm">取消</el-button>
                <el-button type="primary" @click="submitForm">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";
import { reactive, ref, watch } from "vue";
import { addAttributeApi, editAttributeApi } from "./api";
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    id: {
        type: Number,
        default: 0,
    },
    row: {
        type: Object,
    }
})
// const rowData = props.row as IProductAttrList
const emit = defineEmits(["Show"]);

const formLabelWidth = '100px';
// 编辑框内ref数据
const formRef = ref<FormInstance>()
// 输入数据
const form = reactive({
    attributeCount: 0,
    id: 0,
    name: '',
    paramCount: 0,
})

console.log(props.id);
watch(() => props.id, () => {
    if (props.id !== 0) {
        Object.assign(form, props.row)
    }
})



const rules = reactive({
    name: [{ required: true, trigger: "blur", message: "请填写类型名称" }],
})


// 添加属性的请求
const addAttribute = () => {
    ElMessageBox.confirm('确定要添加商品属性吗', '添加商品属性', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => {
        addAttributeApi(form.name).then((res) => {
            ElMessage.success("添加成功")
            emit("Show", true);
            formRef.value?.resetFields();
        }).catch(() => {
            ElMessage.error('添加失败,请重新添加');
            formRef.value?.resetFields();
        })
    }).catch(() => {
        ElMessage.error('提交失败,请重新提交')
    })

}

// 编辑修改商品属性
const editAttribute = () => {
    ElMessageBox.confirm('确定要修改商品属性吗', '修改商品属性', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => {
        editAttributeApi(props.id, form.name).then((res) => {
            ElMessage.success("修改成功")
            emit("Show", true);
            formRef.value?.resetFields();
        }).catch(() => {
            ElMessage.error('修改失败,请重新修改');
            formRef.value?.resetFields();
        })
    }).catch(() => {
        ElMessage.error('提交失败,请重新提交')
    })

}


// 点击确定
const submitForm = () => {
    formRef.value?.validate((bool: boolean) => {
        if (bool) {
            if (props.id === 0) {
                // 添加
                addAttribute()
            } else {
                // 修改
                editAttribute()
            }

        } else {
            ElMessage.error('请输入完整信息')
        }
    })
}

// 点击取消
const NosubmitForm = () => {
    // console.log(props.id);
    emit("Show", false);
    form.name = ""
}



</script>

<style lang="less" scoped>
.el-button--text {
    margin-right: 15px;
}
.el-input {
    width: 180px !important;
    height: 40px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
    height: 40px;
}
</style>